import React from 'react';

/**
 * 博客页面组件
 * 显示所有博客文章列表
 */
export default function BlogPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8 text-gray-800">博客文章</h1>
      
      {/* 分类筛选 */}
      <div className="mb-6 flex flex-wrap gap-2">
        <button className="px-4 py-2 bg-blue-600 text-white rounded-full text-sm">
          全部
        </button>
        <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">
          技术分享
        </button>
        <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">
          学习笔记
        </button>
        <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-sm transition-colors">
          生活随笔
        </button>
      </div>
      
      {/* 文章列表 */}
      <div className="space-y-6">
        {[1, 2, 3, 4, 5].map((item) => (
          <article key={item} className="bg-white rounded-lg shadow-sm border overflow-hidden hover:shadow-md transition-shadow">
            <div className="p-6">
              <h2 className="text-2xl font-medium mb-2 text-gray-800">
                Next.js 15 新特性详解 {item}
              </h2>
              <div className="flex items-center gap-4 text-sm text-gray-500 mb-3">
                <span>作者：管理员</span>
                <span>发布于 2024-01-0{item}</span>
                <span>阅读：{item * 123}次</span>
              </div>
              <p className="text-gray-600 mb-4">
                Next.js 15 带来了许多令人兴奋的新特性，包括 Turbopack 构建系统、改进的服务端组件、自动静态优化等。
                本文将详细介绍这些新特性，并通过示例代码展示如何在实际项目中应用它们...
              </p>
              <button className="text-blue-600 hover:text-blue-800 flex items-center gap-1">
                继续阅读 <span>→</span>
              </button>
            </div>
          </article>
        ))}
      </div>
      
      {/* 分页 */}
      <div className="mt-8 flex justify-center">
        <nav className="flex items-center gap-2">
          <button disabled className="px-4 py-2 bg-gray-100 text-gray-400 rounded-md cursor-not-allowed">
            上一页
          </button>
          <button className="px-4 py-2 bg-blue-600 text-white rounded-md">1</button>
          <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-md">2</button>
          <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-md">3</button>
          <button className="px-4 py-2 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-md">
            下一页
          </button>
        </nav>
      </div>
    </div>
  );
}